import React, { Component } from 'react';
import { Form, Input, Tooltip, Icon, Select, Button, AutoComplete,message } from 'antd';
import './News_list.css';
const FormItem = Form.Item;
const Option = Select.Option;
const AutoCompleteOption = AutoComplete.Option;

// const url = 'http://192.168.1.137:8088';
const url = 'http://duodao.chende.top';

class Create_users extends Component{
	constructor(props){
    super(props);
    this.state = {
      confirmDirty: false,
      autoCompleteResult: [],
      email:'',
      password: '',
      username: '',
      department: '',
      role: '',
    }
  }
  handleConfirmBlur = (e) => {
    const value = e.target.value;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  }
  // 表单数据处理事件
  handleEmail = (e) => {
    this.setState({
      email: e.target.value,
    })
  }
  handlePassword = (e) => {
    this.setState({
      password: e.target.value
    })
  }
  handleUsername = (e) => {
    this.setState({
      username: e.target.value,
    })
  }
  handleDepartment = (e) => {
    this.setState({
      department: e.target.value,
    })
  }
  handleSelect = (value) => {
    this.setState({
      role: value
    })
  }

  handleSubmit = (e) => {
    e.preventDefault();
    const email = this.state.email;
    const password = this.state.password;
    const username = this.state.username;
    const department = this.state.department;
    const role = this.state.role;
    const formDate = new FormData();
    formDate.append('uname', username);
    formDate.append('email', email);
    formDate.append('password', password);
    formDate.append('location', department);
    formDate.append('role', role);
    fetch(url+'/users/add', {
      method: 'POST',
      body: formDate,
    })
    .then(res => {
      return res.json();
    })
    .then(res => {
      if(res.code ===0){
        message.info('用户创建成功！');
      }
    })
    .catch(err => {
      console.log(err);
    })
  }

	render(){
    const { getFieldDecorator } = this.props.form;
    const { autoCompleteResult } = this.state;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 16,
          offset: 8,
        },
      },
    };

    const websiteOptions = autoCompleteResult.map(website => (
      <AutoCompleteOption key={website}>{website}</AutoCompleteOption>
    ));
		return(
			<div id="news_list">
        <div className="col-md-12 col-sm-12">
          <h2 >创建新用户</h2>
          <h4 >您可以创建新的用户</h4>
          <div className="ques_box col-md-12 col-sm-12">
            <div>
              <h5 style={{"font-weight": 'bold'}}>填写用户信息</h5>
            </div>
        <Form onSubmit={this.handleSubmit} className="pleaseRegister">
        <FormItem
          {...formItemLayout}
          label="注册邮箱"
        >
          {getFieldDecorator('email', {
            rules: [{
              type: 'email', message: '请输入有效的邮箱地址!',
            }, {
              required: true, message: '请输入注册邮箱!',
            }],
          })(
            <Input onChange = {this.handleEmail} />
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="密码"
        >
          {getFieldDecorator('password', {
            rules: [{
              required: true, message: '请输入密码!',
            }, {
            }],
          })(
            <Input type="password" onChange = {this.handlePassword} />
          )}
        </FormItem>
     
        <FormItem
          {...formItemLayout}
          label={(
            <span>
              用户名&nbsp;
              <Tooltip title="为了方便交流，请您填写真实的姓名">
                <Icon type="question-circle-o" />
              </Tooltip>
            </span>
          )}
        >
          {getFieldDecorator('username', {
            rules: [{ required: true, message: '请输入用户名!', whitespace: true }],
          })(
            <Input onChange = {this.handleUsername} />
          )}
        </FormItem>

        <FormItem
          {...formItemLayout}
          label="机构名称"
        >
          {getFieldDecorator('company', {
            rules: [{ required: true, message: '请输入对应的水泥厂或相关科研机构名称!' }],
          })(
            <AutoComplete
              dataSource={websiteOptions}
              onChange={this.handleWebsiteChange}
              placeholder="水泥厂或相关科研机构名称"
            >
              <Input onChange = {this.handleDepartment} />
            </AutoComplete>
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="用户角色"
        >
          {getFieldDecorator('role', {
            rules: [{ required: true, message: '请选择角色!' }],
          })(
            <Select id="role"  style={{ width: 120 }} onChange = {this.handleSelect} >
                    {/* <Option value="6">管理员</Option> */}
                    {/* <Option value="5">项目负责人</Option> */}
                    {/* <Option value="4" >课题组负责人</Option> */}
                    {/* <Option value="3">专家组</Option> */}
                    {/* <Option value="2">课题组成员</Option> */}
                    {/* <Option value="1">水泥厂用户</Option> */}
                    <Option value="3">普通用户</Option>
                    <Option value="1">专家</Option>
            </Select>
          )}
        </FormItem>
      
        <FormItem {...tailFormItemLayout}>
          <Button type="primary" htmlType="submit">创建用户</Button>
        </FormItem>
      </Form>
          </div>    
        </div>
      </div>
		)
	}
}
const MyCreate_users = Form.create()(Create_users);
export default MyCreate_users;